<template>
    <view class="content">
        <view class="main">
            <scroll-view scroll-y="true" @scroll="handleScroll" style="height: 100vh;" :scroll-top="scrollTop"
                ref="myScrollView" show-scrollbar="false"  @scrolltolower="loadMore">
                <!-- 这里是页面其他内容 -->
                <view class="content-top fixed_top" id="content_top">
                    <van-nav-bar left-arrow @click-left="onClickLeft" class="fixed_top" id="navBar"> </van-nav-bar>
                </view>
                <view class="main-container">
                    <!-- 商品图片  五张轮播 -->
                    <view class="myScoreBg" ref="myScoreBg">
                        <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/myScoreBg1231.png"
                            alt="">
                    </view>
                    <view class="myScoreTop">
                        <view class="myScoreNum">{{ myScore }}</view>
                        <view class="myScoreText">当前总积分</view>
                    </view>
                    <view class="myScoreDetail">
                        <view class="myScoreDetail_title" @tap="showPopup"><span class="r16">筛选</span> <van-icon
                                name="arrow-down" :style="textColor" /></view>
                        <view class="myScoreDetail_content" v-if="recordsList.length>0">
                            <view class="detailBox" v-for="(item,index) in recordsList" :key="index">
                                <view class="detailBox_left">
                                    <view class="left_top">{{item.businessDescription}} </view>
                                    <view class="left_bottom">乐生活 | {{item.createTime}}</view>
                                </view>
                                <!-- <view class="detailBox_right">{{item.status==='add' ? '+' :'-'}}{{item.num}}</view> -->
                                <view class="detailBox_right">{{item.points > 0 ? `+${item.points}` : item.points}}
                                </view>
                            </view>
                            <view v-if="loading" class="loading-text">正在加载...</view>
                            <view v-if="finished" class="no-more-text">没有更多了</view>

                        </view>
                        <view class="myScoreDetail_content" v-else>
                            <van-empty class="custom-image"
                                image="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/scoreEmpty.png"
                                description="当前筛选项下无积分" />
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
        <filterPopup symbol="points" :filterData="filterData" :show="showFilterPopup" @closePopup="closePopup" @confirmFilter="confirmFilter"></filterPopup>

        <!-- <van-popup :show="showFilterPopup" position="bottom" round @click-overlay="closePopup"
            custom-style="width: 100%;overflow:scroll;background:#ffffff;">
            <view class="popup-content">
                <view class="popup-title">
                    <view class="popup-title-left">筛选</view>
                    <view class="popup-title-right" @click="closePopup"><van-icon name="arrow-up" size="12" /></view>
                </view>
                <view class="popup-main">
                    <view class="popup-sort">
                        <view class="popup-item" :class="{ active: curPopup === index }"
                            v-for="(item, index) in filterData" :key="index"
                            @click="onClickPopup(index, $event, item.name)">{{ item.name }}</view>
                    </view>
                </view>
                <view class="goodsAction btn-area">
                    <button type="waring" plain class="button" @tap="confirmFilter">确认</button>
                </view>
            </view>
        </van-popup> -->
    </view>
</template>

<script>
import { topStyleWhite, topStyleBlack } from '@/utils/topColor'
import {getMyPointsApi} from '@/api/points.js'
import filterPopup from '@/mycomponents/filterPopup.vue'

export default {
    components: {
        filterPopup
    },
    data () {
        return {
            title: '我的积分',
            scrolling: false, // 顶部区域吸顶效果
            scrollTop: 0,
            params:{},
            myScore:'0',
            recordsList:[
                // {
                //     title:'幸运积分好礼',
                //     des:'乐生活 | 2024/11/05  15:20:30',
                //     num:'20',
                //     status:'add'
                // },
                // {
                //     title:'幸运积分好礼',
                //     des:'乐生活 | 2024/11/05  15:20:30',
                //     num:'20',
                //     status:'add'
                // },
                // {
                //     title:'幸运积分好礼',
                //     des:'乐生活 | 2024/11/05  15:20:30',
                //     num:'20',
                //     status:'add'
                // }
                
            ],
            curPopup:0,
            showFilterPopup:false,
            filterData: [
                {
                    id: 0,
                    name: '全部'
                },
                {
                    id: 1,
                    name: '已获得'
                },
                {
                    id: 2,
                    name: '已使用'
                },
                {
                    id: 3,
                    name: '已过期'
                },

            ],
            textColor:'',
            pointsType:'',// 积分类型 REWARD: 奖励获得, USE: 使用消费
            pageNum:1,
            pageSize:10,
            total:0,
            loading: false,
            finished: false,
            hasData:false,  //是否有数据
        }
    },

    computed: {

    },
    onLoad (data) {
        // 取到路由携带的参数
        if (data != null) {
            this.params = JSON.parse(decodeURIComponent(data.params))
            console.log('params', this.params)
            if(this.params.myPoints){
                this.myScore = this.params.myPoints
            }
        }
    },
    onReady () {},

    onShow(){
        this.getMyPointsInfo()
    },

    beforeDestroy() {
        clearInterval(this.timer); // 在组件销毁前清除定时器，防止内存泄漏
    },
    methods: {
        // 返回的箭头
        onClickLeft () {
            uni.navigateBack()
        },
        // huadong
        handleScroll (e) {
            topStyleWhite()

            // this.old.scrollTop = e.detail.scrollTop
            if (e.detail.scrollTop > 5 && !this.scrolling) {
                this.scrolling = true
            } else if (e.detail.scrollTop <= 5 && this.scrolling) {
                this.scrolling = false
            }
        },
       loadMore() {
            if (!this.finished) {
                this.getMyPointsInfo();
            }
        },
        // 显示积分类型
        showPopup(){
            this.showFilterPopup=true
        },
        // 关闭
        closePopup(){
            this.showFilterPopup=false
        },
        // // 弹窗内点击事件
        // onClickPopup(index,e,name){
        //     console.log(index,e,'弹窗内点击事件')
        //     this.curPopup=index
        //     this.swiperTabsCurrent = index    //页面顶部的tab
        //     this.textColor="color:#ff6203"
        //     this.pointsType = index==0 ? '':index==1 ? 'REWARD' :index==2 ? 'USE' :'EXPIRED'  // 积分类型 REWARD: 奖励获得, USE: 使用消费    EXPIRED: 已过期
        // },
        // 弹窗里确认
        confirmFilter(pointsType,curPopup){
            console.log(pointsType,curPopup,'积分弹窗里确认')
            this.pointsType=pointsType
            this.curPopup=curPopup

            if(this.curPopup===3){
                this.recordsList = []
                // this.myScore = this.params.myPoints
                this.showFilterPopup=false
                return
            }
            this.total = 0
            this.pageNum = 1
            this.pageSize = 10
            this.loading = false
            this.finished = false
            this.hasData =  false
            this.recordsList = []
            console.log('确认',this.pointsType)
            this.getMyPointsInfo(true) // 接口  积分详情
            this.showFilterPopup=false
        },
        // 接口  积分详情 
        getMyPointsInfo(isFilter){
            if (this.loading || this.finished) return;
            this.loading = true;
            return new Promise((resolve, reject) => {
                let apiParams = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize
                }
                if(this.pointsType!==''){
                    apiParams.pointsType=this.pointsType
                }
                getMyPointsApi(apiParams).then(res=>{
                    console.log('积分详情',res)
                    if (res.code === 200) {
                        if(!isFilter){
                            this.myScore = res.data?.totalPoints || 0
                        }
                        
                        this.total = res.data?.total || 0
                        // this.recordsList = res.data?.userPointsDetailResponses || []
                        this.recordsList = this.pageNum === 1
                            ? (res.data?.userPointsDetailResponses || [])
                            : [...this.recordsList, ...res.data?.userPointsDetailResponses || []]
                        this.finished = this.recordsList.length >= this.total;
                        this.pageNum++;
                        console.log(this.recordsList, 'this.recordsList')
                        this.hasData = this.recordsList.length > 0
                        resolve(res)
                    } else {
                        reject(res)
                    }
                }).finally(() => {
                    this.loading = false;
                })
            })
        }
    }
}

</script>

<style lang="scss" scoped>
::v-deep .van-nav-bar {
    background-color: transparent !important;
}

.content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    // height: 100vh;
    height: calc(100vh - env(safe-area-inset-bottom));
    overflow-y: auto;
    z-index: -2;
    background-size: 100%;
    background-color: #ffffff;
    padding-bottom: env(safe-area-inset-bottom);

}

.main {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
    background-color: transparent;

    .fixed_top {
        position: fixed;
        width: 100%;
        z-index: 999;
    }

    .top_display {
        display: none;
    }
}


.content-top {

}

.main-container {
    background: #ffffff;
    height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    z-index: -1;

}

// 滚动
.scroll-content {
    flex: 1;
    height: 1px;
}


.myScoreBg {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 556rpx;

    .top_swiper {
        display: block;
        height: 375px;
    }

    img {
        width: 100%;
        height: 556rpx;
    }
}
.myScoreTop{
    z-index: 1;
    padding: 203rpx 0rpx  240rpx 0rpx;
    margin: 0rpx 48rpx;
    text-align: center;
    border-bottom: 1px solid #E5E5E5;
}
.myScoreNum{
    font-size: 60rpx;
    color: #111111;
    font-weight: bolder;
}
.myScoreText{
    font-size: 24rpx;
    color: #111111;
}

.myScoreDetail{
    padding: 48rpx;
    .myScoreDetail_title{
        font-size: 26rpx;
        line-height: 26rpx;
        text-align: left;
        color: #111111;
    }
    .myScoreDetail_content{
        margin-top: 62rpx;
    }
}
.detailBox{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 62rpx;

    .detailBox_left{
        .left_top{
            font-size: 26rpx;
            line-height: 26rpx;
            color: #111111;
        }
        .left_bottom{
            margin-top: 22rpx;
            font-size: 24rpx;
            line-height: 24rpx;
            color: #666666;
        }
    }
    .detailBox_right{
        font-size: 26rpx;
        line-height: 26rpx;
        color: #111111;
    }
}
  // 弹窗
  .popup-content {
      // height: 247px;
      padding: 48rpx 48rpx 144rpx 48rpx;
      font-size: 28rpx;
      background: #ffffff;
      border-radius: 0 0 12px 12px;

      .popup-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 36rpx;
          text-align: left;
          color: #000000;
      }

      .popup-main {
          margin-top: 20px;
          width: 100%;
          margin-bottom: 65rpx;
      }

      .popup-sort {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-wrap: wrap;
      }

      .popup-item {
          // width:30%;
          border: 1px solid #d4d4d4;
          margin-right: 34rpx;
          margin-bottom: 12px;
          // font-weight: 500;
          font-size: 28rpx;
          text-align: center;
          color: #111111;
          height: 60rpx;
          line-height: 60rpx;
          padding-left: 20rpx;
          padding-right: 20rpx;


          &.active {
              border: 1px solid #111111;
              color: #111111;
          }
      }

      button {
          background-color: #FF6203;
          width: 100%;
          border-radius: 38px;
          font-size: 28rpx;
          text-align: center;
          color: #FFFFFF;
          height: 86rpx;
          line-height: 86rpx;
      }

      button[plain] {
          border: none;
      }


  }
::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep .van-icon {
    color: #242629 !important;
}


::v-deep .van-nav-bar__title {
    font-size: 28rpx;
    color: #333333;
}

::v-deep .van-hairline--bottom:after {
    border: none;
}


.pl15 {
    padding-left: 15px;
}

.l20 {
    margin-left: 20px;
}
.r12{
    margin-right: 12px;
}
.r13 {
    margin-right: 13px;
}

.r8 {
    margin-right: 8px;
}
.r16{
    margin-right:16rpx
}

::v-deep .van-icon-arrow {
    color: #b3b3b3 !important;
}

::v-deep .van-info {
    background-color: #FF6203;
}
.loading-text, .no-more-text {
    padding: 20rpx;
    text-align: center;
    color: #888;
    font-size: 24rpx;
}
</style>
